<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人认证</title>
    <link rel="stylesheet" href="../static/css/bootstrap.css">
    <script src="../static/js/jquery.js"></script>
    <script src="../static/js/bootstrap.js"></script>
    <style>
        .container {
            max-width: 500px;
        }
        h3 {
            color: #0084ff;
            font-weight: bold;
        }
        label {
            font-weight: lighter;
        }
        form>div {
            margin-top: 20px;
        }
        .btn {
            margin-left: 35%;
        }

        /* 手持身份证的样式 */
        #myFile {
            opacity: 0;
        }
        img {
            width: 120px;
            height: 120px;
            border: 1px solid #f7f7f7;
            margin-top: 10px;
        }
        #upload-label{
            text-align: center;
            background-color: #0084ff;
            color: #fff;
            display: block;
            width: 120px;
            height: 35px;
            line-height: 35px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h3>个人认证</h3>
        <div class="certify-info" style="color: #0084ff; width: 100%; height: 30px; line-height: 30px; text-align: center; font-size: 20px; font-weight: bold">
            认证成功 √
        </div>
        <form id="certify" action="#" method="post" enctype="multipart/form-data">
            <div>
                <label for="">真实姓名:</label>
                <div>
                    <input name="name" type="text" class="form-control">
                </div>
            </div>
            <div>
                <label for="">身份证号:</label>
                <div>
                    <input name="cardID" type="text" class="form-control">
                </div>
            </div>
            <div>
                <label for="">手持身份证:</label>
                <div>
                    <label id="upload-label" for="myFile">上传手持身份证图片</label>
                    <img for="myFile" id="head-img" src="../static/images/list-head.png" alt="默认图片">
                    <input name="cardPhoto" type="file" id="myFile">
                </div>
            </div>
            <div>
                <button class="submit-certify btn btn-primary">确认修改</button>
            </div>
        </form>
    </div>
</body>
</html>
<script>

    var curWwwPath = window.location.href;
    var pathName = window.location.pathname;
    var ctx = curWwwPath.substring(0,curWwwPath.indexOf(pathName));

    $(document).ready(function () {
        previewHead();

        loadCertifyStatus();
        loadCertify();

        // 点击发送认证
        $(".submit-certify").click(function () {
            certifyCustomer();

            return false;
        })
    })

    function certifyCustomer() {
        var formData = new FormData($("#certify")[0]);
        var url = ctx + "/person/certifyCustomer";
        console.log(formData);
        $.ajax ({
            "url": url,
            "data": formData,
            "dataType": "json",
            "type": "Post",
            "processData": false,
            "contentType": false,
            "success": function (json) {
                if (json.state == 200) {
                    alert("已经开始认证...");
                    window.location.href = "/person/toCertifyPerson"
                } else {
                    alert();
                }
            }
        })
    }

    function loadCertifyStatus() {
        $.ajax ({
            "url": ctx + "/person/getCertifyStatus",
            "type": "Post",
            "success": function (json) {
                if (json.state == 200) {
                    if (json.data == 1) {
                        $(".certify-info").show();
                        $("#certify input").attr("readonly","readonly");
                        $("#certify").show();
                    } else if (json.data == 0) {
                        $(".certify-info").text("还未提交认证资料")
                        $(".certify-info").show()
                        $("#certify").show();
                    } else if (json.data == 2) {
                        $(".certify-info").text("审核中...")
                        $(".certify-info").show();
                        $("#certify input").attr("readonly","readonly");
                    }
                }
            }
        })
    }

    // 加载认证信息...
    function loadCertify() {
        var url = ctx + "/person/selectCertifyCustomer";
        $.ajax({
            "url": url,
            "dataType": "json",
            "type": "Post",
            "success": function (json) {
                $("input[name='name']").val(json.data.cmName);
                $("input[name='cardID']").val(json.data.cmCardID);
                $("#head-img").attr("src", json.data.cmCardPhoto);
            }
        })
    }

    // 头像预览
    function previewHead() {
        var file = document.getElementById("myFile");
        file.onchange = function(){  // 文本框内容改变时触发
            var files = this.files; // 获取文件的数量
            for(var i=0;i<files.length;i++){
                readers(files[i])
            }
        }
        function readers(fil){
            var reader = new FileReader();  // 异步读取存储在用户计算机上的文件
            reader.readAsDataURL(fil); // 开始读取指定的Blob对象或File对象中的内容
            reader.onload = function(){
                document.getElementById("head-img").src = reader.result;  // 添加图片到指定容器中
            };
        }
    }
</script>

